<!-- -->
<template>
  <div class='commonRescource'>
    <el-empty v-if='!list.length' description='暂无数据'></el-empty>
    <div v-if='isPic' style="display:flex;flex-wrap:wrap; margin: 10px auto">
      <div style="margin-bottom:10px;border:1px solid rgb(229, 229, 229);padding:4px;margin-right:2%;width:18%;border-radius: 4%" v-for='i in list' :key='i.id'>
        <div style="text-align:center;">
          <el-image :src="`${host}${i.homePage ? i.homePage : i.headPath ? i.headPath : ''}`" alt="" style='width:100%;height:230px;line-height:230px;'>
          <!-- <el-image :src="`${host}${i.headPath}`" alt="" style='width:100%;height:230px;line-height:230px;'> -->
            <div slot="error" class="image-slot noImage">{{isDetail =="teacher" ? '暂无图片' : '暂无封面'}}</div>
          </el-image>
        </div>
        <div v-if='isDetail == "detail"' style="display:flex;justify-content:space-between;line-height:30px" >
        <!-- <el-button type="text" style="flex:5;margin-left:20px;text-align:left">{{i.courseName}}</el-button> -->
        <span type="text" style="flex:5;margin-left:20px;text-align:left;overflow:hidden;	text-overflow:ellipsis;white-space:nowrap;line-height: 35px">{{i.courseName}}</span>
          <div>
            <el-button type="text" @click="getResource(i)">查看资源</el-button>
            <el-button type="text" @click="getDetail(i)">查看详情<i class="el-icon-arrow-right" ></i></el-button>
            <!--  -->
             </div>
          <!-- <div style="flex:1;">
          </div> -->
        </div>
        <div v-if='isDetail == "false"' style="cursor:pointer" @click="getDetail(i)">
          <div style="margin-left: 10px;text-overflow:ellipsis;white-space:nowrap;">{{i.courseName}} </div>
          <div style="margin-left: 10px;">保存时间：{{i.createTime}} </div>
          <!-- <div style="flex:1">
            <i class="el-icon-arrow-right"></i>
          </div> -->
        </div>
        <div v-if='isDetail =="teacher"'  @click="getDetail(i)" style="cursor:pointer">
          <div style="display:flex;justify-content:space-between;">
            <div style="margin-left: 10px">
              <div><span class="colorGray">姓名：</span> {{i.realName || '暂无'}}</div>
              <div><span class="colorGray">职称：</span> {{i.ratingTitle || '暂无'}}</div>
              <div><span class="colorGray">毕业院校：</span> {{i.school || '暂无'}}</div>
            </div>
            <div>
              <el-button type="text">查看详情<i class="el-icon-arrow-right" style="margin-top: 12px;color: tgb(229,2929,229);font-weight: 900;"></i></el-button>
              <!-- <i class="el-icon-arrow-right" style="margin-top: 12px;font-size: 45px;color: #aaa;font-weight: 900;cursor:pointer" @click="getDetail(i)"></i> -->
            </div>
          </div>

        </div>
      </div>
    </div>
    <div v-else style="display:flex;flex-wrap:wrap; margin: 10px auto">
      <div class="auditClass" style="border-radius: 4%" v-for='i in list' :key='i.id'>
        <div class='auditItem' style="" v-if='toAudit'>
          {{i.fileCount}}个课件需审核
        </div>
        <div class="auditItem" v-else style='color:green;border-radius: 4%'>
          已审核完毕
        </div>
        <div style="display:flex;justify-content:space-between;cursor:pointer;line-height:40px;" @click="getDetail(i)">
          <div style="margin-left: 10px;text-overflow:ellipsis;white-space:nowrap;">{{i.courseName}} </div>
          <el-button type="text">查看详情<i class="el-icon-arrow-right"></i> </el-button>
        </div>
      </div>
    </div>
    <el-dialog title="查看资源"
               :visible.sync="visible"
               width="1300px"
               append-to-body
               :close-on-click-modal="false"
               @close="cancelDialog">
      <el-container>
        <newExper @cancelCall="cancelDialog"/>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import newExper from './newExper';

export default {
  components: {newExper},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    isDetail: {
      prop: String,
      default: "detail",
    },
    isPic: {
      prop: Boolean,
      default: true,
    },
    toAudit: {
      prop: Boolean,
      default: true,
    },
    visible: false,
  },
  data() {
    return {
      host: window.location.href.split("/#/")[0] + "/api",
    };
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    getDetail(i) {
      this.$emit("clickDetail", i);
    },
    getResource(i) {
      // this.$emit('clickResource', i)
      this.visible = true;
    },    
    cancelDialog() {
        // this.$refs["deployForm"].resetFields();
        this.visible = false;
    },
    saveCommit() {
        
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
@color: rgb(229, 229, 299);
.auditClass {
  margin-bottom: 10px;
  border: 1px solid @color;
  padding: 4px;
  margin-right: 2%;
  width: 18%;
  .auditItem {
    text-align: center;
    height: 230px;
    line-height: 230px;
    background: #dfdfdf;
    color: red;
    font-size: 24px;
    font-weight: 700;
  }
}
.image-slot{
  color: @color;
}
</style>
<style lang="less">
@color: rgb(229, 229, 229);
.el-image__error, .el-image__placeholder{
  background: none;
}
.commonRescource .noImage{
  background: @color;
  border-radius: 4%;
}
.colorGray{
  color: gray;
}
</style>
